<template>
	<view class="mall">
		<uv-navbar leftText="邻事币商城" @leftClick="leftClick" placeholder />
		<view class="flex align-center justify-between" style="padding: 30rpx;">
			<view class="card">
				<view class="flex align-center">
					<image src="https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0816/a6b30202508161032551755.png" mode="widthFix" style="width: 50rpx;"/>
					<uv-text size="24rpx" color="#333" text="邻事币" class="uv-text-init" style="margin-left: 10rpx;" />
				</view>
				<uv-text size="40rpx" color="#333" text="0" class="uv-text-init" />
			</view>
			<view class="card">
				<view class="flex align-center">
					<image src="https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0816/a4499202508161033216733.png" mode="widthFix" style="width: 50rpx;"/>
					<uv-text size="24rpx" color="#333" text="兑换记录" class="uv-text-init" style="margin-left: 10rpx;" />
				</view>
				<uv-text
					class="uv-text-init"
					size="24rpx" color="#989999" text="查看" @click="toRoute('/pages-home/market/mall_order')"
					suffixIcon="arrow-right" iconStyle="color:#989999;font-size: 28rpx"
				/>
			</view>
		</view>
		<view class="tabs">
			<uv-tabs :list="tabsList" @click="tabsClick" lineColor="#BC2722" />
		</view>
		
		<view class="list">
			<view class="item" v-for="(e,i) in 10" :key="i">
				<uv-image src="https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0813/9149a202508130940323036.png" mode="widthFix" width="100%" />
				<view class="info">
					<uv-text size="30rpx" color="#333" text="修缮系列(预约)"/>
					<uv-gap height="10" bgColor="transparent" />
					<view class="flex align-center justify-between">
						<view>
							<uv-text size="28rpx" color="#CC2B25" text="1邻事币"/>
							<uv-text size="24rpx" color="#727171" text="¥0" decoration="line-through" />
						</view>
						<uv-button text="兑换" color="#CC2B25" size="mini" shape="circle" />
					</view>
				</view>
			</view>
		</view>
		
		<lst-tabbar :value="0" :list="tabbarList" />
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	
	const tabbarList = ref([
		{ text: '首页', inactive: 'home/market_tabbar_home_i.png', active: 'home/market_tabbar_home_a.png', path: '/pages-home/market/mall' },
		{ text: '订单', inactive: 'home/market_tabbar_order_i.png', active: 'home/market_tabbar_order_a.png', path: '/pages-home/market/mall_order' }
	])
	const tabsList = ref([
		{ name:'热门兑换' }, { name:'家修急事' }, { name:'助老家事' },{ name:'宝宝家事' },
		{ name:'上门美业' }, { name:'家庭陪护' }, { name:'家政服' },{ name:'务闲置二手' },
		{ name:'电商惠购' }, { name:'技能提升' }, { name:'家事跑腿' },{ name:'搬家拉货' },{ name:'邻里邻工' }
	])
	
	const tabsClick = (i) => {
		console.log(i)
	}
	
	const leftClick = () => uni.navigateBack()
	
	const toRoute = (url) => uni.navigateTo({ url })
</script>

<style>
	page {
		background-color: #F3F4F6;
	}
</style>

<style lang="scss" scoped>
	.mall {
		position: relative;
		.box {
			padding: 0 30rpx;
		}
	}
	.card {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx;
		border-radius: 20rpx;
		box-sizing: border-box;
		background-color: #fff;
		&:first-child {
			margin-right: 15rpx;
		}
		&:last-child {
			margin-left: 15rpx;
		}
	}
	.tabs {
		z-index: 2;
		position: sticky;
		padding: 0 20rpx;
		background-color: #fff;
		top: calc(var(--status-bar-height) + 85rpx);
	}
	.list {
		z-index: 1;
		position: relative;
		display: grid;
		padding: 30rpx;
		grid-gap: 30rpx;
		grid-template-columns: repeat(2, 1fr);
		.item {
			overflow: hidden;
			border-radius: 10rpx;
			background-color: #fff;
			.info {
				padding: 20rpx;
			}
		}
	}
</style>